<template>
  <div id="love-active-froze">
    <c-title :hide="false" :text="`${froze_name}激活`"></c-title>
    <div class="top-name">可激活: {{froze}}</div>
    <div class="bottom-detail">
      <div class="active-num-name">激活数量</div>
      <div class="active-num-detail">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/love_active_froze.png" alt="">
        <span class="num"><van-field v-model="nums" type="number"></van-field></span>
        <!-- <span class="name">全部兑换</span> -->
      </div>
      <div class="describe">
        <div class="describe-one">
          {{active_forze_love}}{{froze_name}} = {{active_forze_point}}{{pointKey}}
          <span class="space-line">激</span>活{{pointKey}}: {{point}}
          <template v-if="active_forze_nums !== ''"><span class="space-line">每</span>日最多激活{{active_forze_nums}}{{froze_name}} </template>
          <template v-if="active_forze_times !== ''"><span class="space-line">每</span>日最多激活{{active_forze_times}}次</template>
        </div>
      </div>
      <div class="active-bg" @click="activeLoveFroze">激活</div>
    </div>
  </div>
</template>
<script>
import cTitle from "components/title";

export default {
  data() {
    return {
      nums: "",
      active_forze_love: "",
      active_forze_nums: "",
      active_forze_point: "",
      active_forze_times: "",
      froze: "",
      froze_name:"",
      pointKey:"",
    };
  },
  mounted() {
    if (this.$route.query.froze_name && this.$route.query.pointKey) {
      this.froze_name = this.$route.query.froze_name;
      this.pointKey = this.$route.query.pointKey;
    }
    this.getData();
  },
  computed: {
    point(){
      let value =  parseInt(Number(this.active_forze_point)) / parseInt(Number(this.active_forze_love));
      return (parseInt(Number(this.nums)) * value).toFixed(2)
    }
  },
  methods: {
    async getData() {
      let { data, result, msg } = await $http.post("plugin.love.Frontend.Modules.Love.Controllers.active-froze.index");
      this.active_forze_love = data.active_forze_love;
      this.active_forze_nums = data.active_forze_nums;
      this.active_forze_point = data.active_forze_point;
      this.active_forze_times = data.active_forze_times;
      this.froze = data.froze;
    },
    async activeLoveFroze() {
      let { data, result, msg } = await $http.post("plugin.love.Frontend.Modules.Love.Controllers.active-froze.active",{nums:this.nums});
      if(result) {
        this.$toast.success(msg);
      }else {
        this.$toast.fail(msg);
      }
    }
  },
  components: { cTitle }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#love-active-froze {
  .top-name {
    display: flex;
    font-size: 0.88rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 0.75rem;
    color: #333;
    margin: 0.91rem;
  }

  .bottom-detail {
    margin: 0 0.94rem;
    background-color: #fff;
    box-shadow: 0 0.06rem 0.25rem 0 rgba(7, 11, 33, 0.11);
    padding-bottom: 1.03rem;

    .active-num-name {
      display: flex;
      font-size: 0.83rem;
      font-weight: normal;
      font-stretch: normal;
      line-height: 0.75rem;
      color: #333;
      padding: 1.31rem 0 1.81rem 1.91rem;
    }

    .active-num-detail {
      display: flex;
      margin: 0 2.25rem;
      padding-bottom: 0.97rem;
      justify-content: space-between;
      align-items: baseline;
      border-bottom: 0.03rem solid rgba(84, 152, 252, 0.75);

      img {
        width: 1.41rem;
        height: 1.28rem;
        margin-right: 1.41rem;
      }

      .num {
        font-size: 1.59rem;
        font-weight: bold;
        font-stretch: normal;
        line-height: 0.75rem;
        color: #333;
        flex: 3;
      }

      .name {
        font-size: 0.75rem;
        font-weight: normal;
        font-stretch: normal;
        line-height: 0.75rem;
        color: #f15353;
      }
    }

    .describe {
      padding: 0.31rem 1.94rem 2.75rem 1.91rem;

      .describe-one {
        font-weight: normal;
        font-stretch: normal;
        line-height: 1rem;
        letter-spacing: 0.02rem;
        color: #888;
        // display: flex;
        font-size: 0.69rem;
        text-align: left;

        .space-line {
          margin-left: 0.2rem;
        }
      }
    }
  }

  .active-bg {
    padding: 0.78rem 7.81rem;
    background: linear-gradient(#f15353, #f15353), linear-gradient(#4d1717, #4d1717);
    color: white;
    border-radius: 0.38rem;
    margin: 0 1.81rem 0 2.25rem;
  }
}

::v-deep .van-cell {
  padding: 0;
}

::v-deep .van-field__body {
  font-size: 1.59rem;
  font-weight: bold;
  font-stretch: normal;
  line-height: 0.75rem;
  color: #333;
}
</style>
